<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>你的眼里有星辰大海-</title>
        <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
        <style>
            html{background-color: #333;}
        </style>
    </head>
    <body >
        <script type="text/javascript" src="__STATIC__/websocket/swfobject.js"></script>
        <script type="text/javascript" src="__STATIC__/websocket/web_socket.js"></script>
        <script type="text/javascript" src="__STATIC__/public_ui/jquery.min.js"></script>
        <script src="__STATIC__/layui/layui.js"></script>
        <!--<script src="__STATIC__/layer/layer.js"></script>-->
        <script src="__STATIC__/websocket/ws_main.js?time={$time}"></script>
        <script>
            if (!/^http(s*):\/\//.test(location.href)) {
                alert('请部署到localhost上查看该演示');
            }
            layui.use('layim', function (layim) {
                //演示自动回复
                var autoReplay = [
                    '您好，我现在有事不在，一会再和您联系。',
                    '你没发错吧？face[微笑] ',
                    '洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
                    '你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
                    'face[威武] face[威武] face[威武] face[威武] ',
                    '<（@￣︶￣@）>',
                    '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
                    'face[黑线]  你慢慢说，别急……',
                    '(*^__^*) face[嘻嘻] ，是贤心吗？'
                ];

                //基础配置
                layim.config({
                    //初始化接口
                    init: {
                        mine: {$user_mine},
                        // 好友列表
                        friend: {$frends_list},
                        //群
                        group: {$group_list}
                    }
                    //查看群员接口
                    , members: {
//                        url: '__STATIC__/json/getMembers.json'
                        url: '/index/chat/group_list.html'
                        , data: {}
                    }
                    //上传图片接口
                    , uploadImage: {
                        url: '/index/upload/qiniu_img' //（返回的数据格式见下文）
                        , type: '' //默认post
                    }
                    //上传文件接口
                    , uploadFile: {
                        url: '/index/upload/qiniu_file' //（返回的数据格式见下文）
                        , type: '' //默认post
                    }
                    //扩展工具栏
                    , tool: [{
                            alias: 'code'
                            , title: '代码'
                            , icon: '&#xe64e;'
                        }]

                            //,brief: true //是否简约模式（若开启则不显示主面板）
                            //,title: 'WebIM' //自定义主面板最小化时的标题
                            //,right: '100px' //主面板相对浏览器右侧距离
                            //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
                    , initSkin: '5.jpg' //1-5 设置初始背景
                            //,skin: ['aaa.jpg'] //新增皮肤
                            //,isfriend: false //是否开启好友
                            //,isgroup: false //是否开启群组
                            //,min: true //是否始终最小化主面板，默认false
                    , notice: true //是否开启桌面消息提醒，默认false
                            //,voice: false //声音提醒，默认开启，声音文件为：default.wav

                    , msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
                    , find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
                    , chatLog: layui.cache.dir + 'css/modules/layim/html/chatLog.html' //聊天记录页面地址，若不开启，剔除该项即可

                });

                /*
                 layim.chat({
                 name: '在线客服-小苍'
                 ,type: 'kefu'
                 ,avatar: 'http://tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg'
                 ,id: -1
                 });
                 layim.chat({
                 name: '在线客服-心心'
                 ,type: 'kefu'
                 ,avatar: 'http://tva1.sinaimg.cn/crop.219.144.555.555.180/0068iARejw8esk724mra6j30rs0rstap.jpg'
                 ,id: -2
                 });
                 layim.setChatMin();*/

                //监听在线状态的切换事件
                layim.on('online', function (data) {
                    //console.log(data);
                });

                //监听签名修改
                layim.on('sign', function (value) {
                    //console.log(value);
                });

                //监听自定义工具栏点击，以添加代码为例
                layim.on('tool(code)', function (insert) {
                    layer.prompt({
                        title: '插入代码'
                        , formType: 2
                        , shade: 0
                    }, function (text, index) {
                        layer.close(index);
                        insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
                    });
                });

                //监听layim建立就绪
                layim.on('ready', function (res) {
                    //console.log(res.mine);
                    layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得
                    //添加好友（如果检测到该socket）
                    layim.addList({
                        type: 'group'
                        , avatar: "http://tva3.sinaimg.cn/crop.64.106.361.361.50/7181dbb3jw8evfbtem8edj20ci0dpq3a.jpg"
                        , groupname: 'Angular开发'
                        , id: "12333333"
                        , members: 0
                    });
                    layim.addList({
                        type: 'friend'
                        , avatar: "http://tp2.sinaimg.cn/2386568184/180/40050524279/0"
                        , username: '冲田杏梨'
                        , groupid: 2
                        , id: "1233333312121212"
                        , remark: "本人冲田杏梨将结束AV女优的工作"
                    });

                    setTimeout(function () {
                        //接受消息（如果检测到该socket）
                        layim.getMessage({
                            username: "Hi"
                            , avatar: "http://qzapp.qlogo.cn/qzapp/100280987/56ADC83E78CEC046F8DF2C5D0DD63CDE/100"
                            , id: "10000111"
                            , type: "friend"
                            , content: "临时：" + new Date().getTime()
                        });

                        /*layim.getMessage({
                         username: "贤心"
                         ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1"
                         ,id: "100001"
                         ,type: "friend"
                         ,content: "嗨，你好！欢迎体验LayIM。演示标记："+ new Date().getTime()
                         });*/

                    }, 3000);
                });


//            //监听发送消息
//            layim.on('sendMessage', function (data) {
//                var To = data.to;
//                //console.log(data);
//
//                if (To.type === 'friend') {
//                    layim.setChatStatus('<span style="color:#FF5722;">对方正在输入。。。</span>');
//                }
//
//                //演示自动回复
//                setTimeout(function () {
//                    var obj = {};
//                    if (To.type === 'group') {
//                        obj = {
//                            username: '模拟群员' + (Math.random() * 100 | 0)
//                            , avatar: layui.cache.dir + 'images/face/' + (Math.random() * 72 | 0) + '.gif'
//                            , id: To.id
//                            , type: To.type
//                            , content: autoReplay[Math.random() * 9 | 0]
//                        }
//                    } else {
//                        obj = {
//                            username: To.name
//                            , avatar: To.avatar
//                            , id: To.id
//                            , type: To.type
//                            , content: autoReplay[Math.random() * 9 | 0]
//                        }
//                        layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
//                    }
//                    layim.getMessage(obj);
//                }, 1000);
//            });

                //监听查看群员
                layim.on('members', function (data) {
//                    console.log(data);
                });

                //监听聊天窗口的切换
                layim.on('chatChange', function (res) {
                    var type = res.data.type;
                    console.log(res)
                    if (type === 'friend') {
                        //模拟标注好友状态
                        //layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
                    } else if (type === 'group') {
                        var group_id = res.data.id;
                        //加入群聊
                        var join_group = '{"type":"join_group","token":"' + token + '","group_id":"' + group_id + '"}';
                        ws.send(join_group);
                    }
                });


                // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
                WEB_SOCKET_SWF_LOCATION = "/swf/WebSocketMain.swf";
                // 开启flash的websocket debug
                WEB_SOCKET_DEBUG = true;
                var ws = {};
                var IS_LINK = false;
                var token = '{$user_tokn}';
                // 连接服务端
                function connect() {
                    // 创建websocket
                    ws = new WebSocket("ws://" + document.domain + ":7272");
                    // 当socket连接打开时，输入用户名
                    ws.onopen = onopen;
                    // 当有消息时根据消息类型显示不同信息
                    ws.onmessage = onmessage;
                    ws.onclose = function () {
                        //layer.msg('已与服务器断开连接,5秒后重连.....');
                        //连接状态改为false
                        IS_LINK = false;
                        setTimeout(function () {
                            layer.msg('开始重连');
                            connect();
                        }, 5000);
                    };
                    ws.onerror = function () {
                        layer.msg('服务器链接失败,5秒后重连.....');
                    };
                }

                // 连接建立时发送登录信息
                function onopen() {
                    //连接状态改为true
                    IS_LINK = true;
                    var login_data = '{"type":"login","token":"' + token + '"}';
                    ws.send(login_data);
                    console.log("websocket握手成功，发送登录数据:等待服务端返回");
                }

                //监听发送消息（好友  群聊天）
                layim.on('sendMessage', function (data) {
                    console.log(data);
                    //信息类型   friend 好友   group 群
                    var msg_type = data.to.type;
                    console.log('发送的信息类型' + msg_type)
                    // 发送消息
                    var mine = JSON.stringify(data.mine);
                    var to = JSON.stringify(data.to);
                    //群
                    var chat_data = '{"type":"chat_message","data":{"mine":' + mine + ', "to":' + to + '},"token":"' + token + '"}';
                    ws.send(chat_data);
                });

                // 服务端发来消息时
                function onmessage(e) {
                    var data = JSON.parse(e.data);
                    console.log(data);
                    if (data.status == 'false') {
                        layer.msg(data.msg);
                    }
                    switch (data.type) {
                        case 'login':
                            //链接服务器的验证
                            break;
                        case 'chat_msg':
                            //聊天 好友与群   type: group    friend
                            var type = data.chat_type;
                            var chatinfo = data.data;
                            var obj = {};
                            if (type == 'friend') {
                                obj = {
                                    username: chatinfo.username,
                                    avatar: chatinfo.avatar,
                                    id: chatinfo.id,
                                    type: 'friend',
                                    content: chatinfo.content
                                };
                                layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
                                layim.getMessage(obj);
                            }
                            if (type == 'group') {
                                //自己发的群信息 自己不展示
                                var user_msg = {$user_mine};
                                if (data.from_id == user_msg.id) {
                                    return
                                }
                                obj = {
                                    username: chatinfo.username,
                                    avatar: chatinfo.avatar,
                                    id: data.group_id,
                                    type: 'group',
                                    content: chatinfo.content
                                };
                                layim.getMessage(obj);
                            }
                            break;
                            //加入群
                        case 'join_group':
                            layim.getMessage({
                                system: true,
                                id: data.group_id,
                                type: "group",
                                content: '群员' + data.user_name + '加入群聊'
                            });
                            break;
                            // 用户退出 更新用户列表
                        case 'logout':
                    }
                }


                //定时发送信息告诉客户端我还活着 避免被踢
                setInterval(say_hello, 25000);
                function say_hello() {
                    console.log(IS_LINK);
                    if (IS_LINK === true) {
                        console.log('发送心跳,告诉服务器端我还活着');
                        ws.send('{"type":"ping"}');
                    }
                }
                //开始运行
                connect();
            });

        </script>
        <script>

        </script>
    </body>
</html>
